<template>
  <div>
    <el-card style="width: 500px; margin: 50px auto;">
      <h2 style="text-align: center;">注册商铺</h2>
      <el-form :model="storeInfo" label-width="120px" :rules="rules" ref="storeForm">
        <el-form-item label="商铺名称" prop="storeName">
          <el-input v-model="storeInfo.storeName" placeholder="请输入商铺名称"></el-input>
        </el-form-item>
        <el-form-item label="订餐电话" prop="phone">
          <el-input v-model="storeInfo.phone" placeholder="请输入订餐电话"></el-input>
        </el-form-item>
        <el-form-item label="开始经营时间" prop="storeStartTime">
          <el-time-picker
            v-model="storeInfo.storeStartTime"
            placeholder="选择开始时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束经营时间" prop="storeEndTime">
          <el-time-picker
            v-model="storeInfo.storeEndTime"
            placeholder="选择结束时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="商铺简介" prop="storeIntro">
          <el-input
            v-model="storeInfo.storeIntro"
            type="textarea"
            :rows="4"
            placeholder="请输入商铺简介"
          />
        </el-form-item>
        <el-form-item label="营业执照" prop="storeLicense">
            <el-col style="margin-top: 20px;" :span="12">
            <el-upload
            action=""
            :on-change="handlePermitChange"
            :auto-upload="false"
            :show-file-list="true"
          >
            <el-button slot="trigger" type="primary">选择卫生许可</el-button>
          </el-upload>
          </el-col>
          <el-col style="margin-top: 20px;" :span="12">
            <el-upload
            action=""
            :on-change="handleLicenseChange"
            :auto-upload="false"
            :show-file-list="true"
            >
            <el-button slot="trigger" type="primary">选择营业执照</el-button>
          </el-upload>
          </el-col>
            
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('storeForm')">提交</el-button>
          <el-button @click="resetForm('storeForm')">重置</el-button>
          <el-button @click="login">返回主页</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>

  export default {
     name: 'insertStore',
     data () {
       return {
        storeInfo: {
            storeName: '',
            phone:'',
            storeStartTime: '',
            storeEndTime: '',
            storeIntro: ''
        },
        licenseFile:"",
        permitFile:"",
        rules: {
            storeName: [
            { required: true, message: '请输入商铺名称', trigger: 'blur' }
            ],
            phone: [
            { required: true, message: '请输入订餐电话', trigger: 'blur' }
            ],
            storeStartTime: [
            { required: true, message: '请选择开始经营时间', trigger: 'change' }
            ],
            storeEndTime: [
            { required: true, message: '请选择结束经营时间', trigger: 'change' }
            ],
            storeIntro: [
            { required: true, message: '请输入商铺简介', trigger: 'blur' }
            ]
        }
       }
     },
     methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const formData = new FormData();
                    formData.append('storeName',this.storeInfo.storeName);
                    formData.append('userId',JSON.parse(localStorage.getItem('user')).userId);
                    formData.append('userName',JSON.parse(localStorage.getItem('user')).userName);
                    formData.append('phone',this.storeInfo.phone);
                    formData.append('storeStartTime',this.storeInfo.storeStartTime);
                    formData.append('storeEndTime',this.storeInfo.storeEndTime);
                    formData.append('storeIntro',this.storeInfo.storeIntro);
                    formData.append('license', this.licenseFile);
                    formData.append('permit', this.permitFile);
                    this.$http.post("/meals/store/insertStore", formData)
                    .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg);
                        this.$router.push("/main");
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                    })
                    .catch(err => {
                    console.error(err);
                    ElMessage.error('注册失败，请重试');
                    });
                } else {
                console.log('验证失败!');
                return false;
                }
            });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        },
        handleLicenseChange(file) {
        this.licenseFile = file.raw;
        },
        handlePermitChange(file) {
        this.permitFile = file.raw;
        },
        login(){
            this.$router.push("/");
        }
     }
   }
</script>
<style scoped>
</style>